<template>
	<view class="tag-sidebar">
		<view class="sidebar-header">
			<text class="sidebar-title">快速导航</text>
			<img :src="isEdit ? '/static/out.png' : '/static/category.png'" style="width: 50rpx;height: 100%; margin-left:auto" @click="toggleEdit" />
		</view>
		<view class="sidebar-divider"></view>
		<view class="tag-list">
			<view v-for="(category, index) in categories" :key="index" class="tag-item">
				<view class="tag-icon">
					<image :src="category.icon" mode="aspectFit" class="icon-image"></image>
				</view>
				<a v-if="!isEdit" :href="category.url" class="tag-info" target="_blank">
					<text class="tag-name">{{category.name}}</text>
					<text class="nav">{{category.detail}}</text>
				</a>
				<view v-else class="tag-info">
					<input v-model="category.name" class="tag-name" style="width: 100rpx;" />
					<input v-model="category.detail" class="nav" style="width: 160rpx;" />
					<input v-model="category.url" class="nav" style="width: 180rpx;" />
					<button @click="removeCategory(index)" style="margin-left: 10rpx;">删除</button>
				</view>
			</view>
			<view v-if="isEdit" style="margin-top: 20rpx;">
				<button @click="addCategory">添加分类</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "left-content",
		data() {
			return {
				isEdit: false,
				categories: [
					{ name: "百度", detail: "www.baidu.com", icon: "/static/background.png", url: 'https://www.baidu.com' },
					{ name: "CSDN", detail: "www.csdn.net", icon: "/static/background.png", url: "https://www.csdn.net/" },
					{ name: "iconfont", detail: "www.iconfont.cn", icon: "/static/background.png", url: "https://www.iconfont.cn/" },
				]
			};
		},
		methods: {
			toggleEdit() {
				this.isEdit = !this.isEdit;
			},
			addCategory() {
				this.categories.push({
					name: "新分类",
					detail: "新网址",
					icon: "/static/background.png",
					url: ""
				});
			},
			removeCategory(index) {
				this.categories.splice(index, 1);
			}
		}
	}
</script>

<style>
.tag-sidebar {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	height: 100%;
}

.sidebar-header {
	display: flex;
	margin-bottom: 20rpx;
}

.sidebar-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}

.sidebar-divider {
	height: 2rpx;
	background: linear-gradient(to right, #4a6572, #eef2f3);
	margin-bottom: 30rpx;
}

.tag-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.tag-item {
	display: flex;
	align-items: center;
	padding: 16rpx;
	border-radius: 8rpx;
	transition: all 0.3s ease;
}

.tag-item:hover {
	background-color: #f0f7ff;
	transform: translateX(6rpx);
}

.tag-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background-color: #f0f7ff;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.icon-image {
	width: 32rpx;
	height: 32rpx;
}

.tag-info {
	flex: 1;
	text-decoration: none;
}

.tag-name {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 6rpx;
	display: block;
}

.nav {
	font-size: 22rpx;
	color: #888;
	display: block;
}
</style>